<template>
  <el-dialog
    :title="alertTitle"
    :visible.sync="alertFlage"
    :before-close="handleClose"
    width="920px"
  >
    <div class="title-box">
      <div
        v-for="(item, index) in titleArr"
        :key="index"
        @click="changeActive(index)"
      >
        <div
          ref="img_box"
          class="img_box"
          :class="{ active: flage === index }"
          :style="{ height: maxH, 'line-height': maxH }"
        >
          <img :src="item.img || item" />
        </div>
        <div class="text_box">
          <el-radio v-model="flage" :label="index"
            >选项{{ index + 1 }}</el-radio
          >
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="determine">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    alertFlage: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: -1
    },
    flages: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      alertTitle: "",
      titleArr: [],
      activeShow: 0,
      maxH: 0,
      flage: 0
    };
  },
  watch: {
    alertFlage: function() {
      if (!this.alertFlage || this.type < 0) {
        this.titleArr = [];
        this.alertTitle = "...";
        return;
      }
      if (this.type === 1) {
        this.titleArr = [
          {
            img: "http://oss.ztwlxx.cn/shopHTshowlunbo2.png",
            name: ""
          }
        ];
        this.alertTitle = "选择轮播样式";
        this.maxH = "148px";
        return;
      }
      if (this.type === 11) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/ALERTshopHead1.png",
          "http://oss.ztwlxx.cn/ALERTshopHead0.png"
        ];
        this.alertTitle = "选择商品样式";
        this.maxH = "194px";
        return;
      }
      if (this.type === 17) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/shopHTshowhead2.png",
          "http://oss.ztwlxx.cn/shopHTshowhead1.png"
        ];
        this.alertTitle = "选择店铺样式";
        this.maxH = "148px";
        return;
      }
      if (this.type === 19) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/shopHTtitle1.png",
          "http://oss.ztwlxx.cn/shopHTtitle2.png",
          "http://oss.ztwlxx.cn/shopHTtitle3.png"
        ];
        this.alertTitle = "选择标题样式";
        this.maxH = "35px";
        return;
      }
      if (this.type === 15) {
        this.titleArr = [
          //  'http://oss.ztwlxx.cn/ALERTcoupon1.png',
          "http://oss.ztwlxx.cn/ALERTcoupon2.png"
        ];
        this.alertTitle = "选择优惠劵样式";
        this.maxH = "105px";
        return;
      }
      if (this.type === 20) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/%E6%90%9C%E7%B4%A21.svg",
          "http://oss.ztwlxx.cn/%E6%90%9C%E7%B4%A22.svg",
          "http://oss.ztwlxx.cn/%E6%90%9C%E7%B4%A23.svg",
          "http://oss.ztwlxx.cn/%E6%90%9C%E7%B4%A24.svg"
        ];
        this.alertTitle = "选择搜索框样式";
        this.maxH = "75px";
        return;
      }
      if (this.type === 21) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/ALERTimagesNav1.png",
          "http://oss.ztwlxx.cn/ALERTimagesNav2.png",
          "http://oss.ztwlxx.cn/ALERTimagesNav3.png",
          "http://oss.ztwlxx.cn/ALERTimagesNav4.png",
          "http://oss.ztwlxx.cn/ALERTimagesNav5.png",
          "http://oss.ztwlxx.cn/ALERTimagesNav6.png"
        ];
        this.alertTitle = "选择图片导航样式";
        this.maxH = "287px";
        return;
      }
      if (this.type === 22) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/%E4%B8%8A%E6%96%87%E4%B8%8B%E5%9B%BE.png",
          "http://oss.ztwlxx.cn/%E5%B7%A6%E5%9B%BE%E5%8F%B3%E6%96%87.png",
          "http://oss.ztwlxx.cn/%E4%BD%9C%E6%96%87%E5%8F%B3%E5%9B%BE.png",
          "http://oss.ztwlxx.cn/%E5%8F%8C%E6%8E%92%E6%96%87%E7%AB%A0.png"
        ];
        this.alertTitle = "选择图文列表样式";
        this.maxH = "165px";
        return;
      }
      if (this.type === 23) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/ALERTtype0.png",
          "http://oss.ztwlxx.cn/ALERTtype1.png",
          "http://oss.ztwlxx.cn/ALERTtype2.png"
        ];
        this.alertTitle = "选择分类导航样式";
        this.maxH = "100px";
        return;
      }
      if (this.type === 25) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/%E9%99%90%E6%97%B6%E6%8A%98%E6%89%A3a.png",
          "http://oss.ztwlxx.cn/%E9%99%90%E6%97%B6%E6%8A%98%E6%89%A3b.png"
        ];
        this.alertTitle = "选择限时秒杀样式";
        this.maxH = "256px";
        return;
      }
      if (this.type === 26) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/%E6%8B%BC%E5%9B%A2%E6%A0%B7%E5%BC%8Fa.png",
          "http://oss.ztwlxx.cn/%E6%8B%BC%E5%9B%A2%E6%A0%B7%E5%BC%8Fb.png"
        ];
        this.alertTitle = "选择拼团商品样式";
        this.maxH = "256px";
        return;
      }
      if (this.type === 27) {
        this.titleArr = [
          "https://oss.ztwlxx.cn/%E7%A0%8D%E4%BB%B7%E6%A0%B7%E5%BC%8Fa.png",
          "https://oss.ztwlxx.cn/%E7%A0%8D%E4%BB%B7%E6%A0%B7%E5%BC%8Fb.png"
        ];
        this.alertTitle = "选择砍价商品样式";
        this.maxH = "256px";
        return;
      }
      if (this.type === 28) {
        this.titleArr = ["http://oss.ztwlxx.cn/iconcopy.png"];
        this.alertTitle = "视频样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 29) {
        this.titleArr = [
          "http://oss.ztwlxx.cn/ALERTtabBar0.png",
          "http://oss.ztwlxx.cn/ALERTtabBar1.png",
          "http://oss.ztwlxx.cn/ALERTtabBar2.png"
        ];
        this.alertTitle = "选择底部导航样式";
        this.maxH = "100px";
        return;
      }
      if (this.type === 30) {
        this.titleArr = ["http://oss.ztwlxx.cn/ALERTartilceImg.png"];
        this.alertTitle = "选择文章模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 31) {
        this.titleArr = ["http://oss.ztwlxx.cn/alertDizi.png"];
        this.alertTitle = "选择地址模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 32) {
        this.titleArr = ["http://oss.ztwlxx.cn/ALERTduts.png"];
        this.alertTitle = "选择滚图模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 33) {
        this.titleArr = ["http://oss.ztwlxx.cn/ALERTcyherde.png"];
        this.alertTitle = "选择店铺头部模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 34) {
        this.titleArr = ["http://oss.ztwlxx.cn/mendianStyle.png"];
        this.alertTitle = "选择门店模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 35) {
        this.titleArr = ["http://oss.ztwlxx.cn/kcbt.png"];
        this.alertTitle = "选择标题模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 36) {
        this.titleArr = ["http://oss.ztwlxx.cn/dgkc.png"];
        this.alertTitle = "选择单个课程模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 37) {
        this.titleArr = ["http://oss.ztwlxx.cn/kcdg.png"];
        this.alertTitle = "选择多个课程模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 38) {
        this.titleArr = ["http://oss.ztwlxx.cn/kcdg.png"];
        this.alertTitle = "选择菜品列表模块样式";
        this.maxH = "210px";
        return;
      }
      if (this.type === 39) {
        this.titleArr = ["http://oss.ztwlxx.cn/ALERTfel.png"];
        this.alertTitle = "选择组件列表模块样式";
        this.maxH = "300px";
      }
    },
    flages() {
      this.flage = this.flages;
    }
  },
  methods: {
    changeActive(i) {
      this.activeShow = i;
      this.flage = i;
    },
    handleClose() {
      this.$emit("alertChange");
    },
    determine() {
      this.$emit("alertChange", this.activeShow);
    },
    cancel() {
      this.$emit("alertChange");
    }
  }
};
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  flex-wrap: wrap;
  div {
    cursor: pointer;
    .img_box {
      border: 1px solid #e3e2e5;
      margin-right: 10px;
      img {
        width: 261px;
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
      }
    }
    .img_box.active {
      border: 1px solid #3587fc;
    }
    .text_box {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
